<style>
    .consultingImgBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 30px 0;
    }
    
    .consultingText {
        margin-bottom: 30px;
    }
    
    .consultingImg {
        width: 40%;
        height: auto;
        display: block;
    }
    
    .aBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding-top: 30px
    }
    
    .loadTitle {
        margin-bottom: 20px;
    }
    
    a {
        color: black;
        text-decoration: none;
    }
    
    .signBox {
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding-top: 20px;
    }
    
    .sign {
        font-size: 10px;
        color: #d2d2d2;
    }
</style>

<div id="consultingGroup" v-loading="loading">
    <div class="signBox">
        <div class="sign">技术支持 @ 广师大科教-网络研发部</div>
    </div>

    <!-- 报名表下载 -->
    <div class="aBox">
        <!-- <a href="./static/documents/广师大科教报名表.docx" target="_blank" class="normalFontSize"> -->
        <el-button type="primary" @click="controlOpen">下载报名表</el-button>
        <!-- </a> -->
    </div>


    <div class="consultingImgBox" v-for="(item,index) in consultingGroup">
        <div class="normalFontSize consultingText">咨询群{{item.order}}</div>
        <img class="consultingImg" :src="item.fileUrl" alt="找不到图片路径" @load="checkLoadedResult($event)" />
    </div>
</div>

<script>
    new Vue({
        el: "#consultingGroup",
        data() {
            return {
                consultingGroup: [],
                readyCount: 0,
                loading: true,
            }
        },
        methods: {
            getConsultingGroup() {
                let that = this;
                //初始化
                let first = function(callback) {
                    var c1 = new cloud.Cloud({
                        //必填，表示是未登录模式
                        identityless: true,
                        //资源方 AppID
                        resourceAppid: "wx96f760966921f98a",
                        //资源方环境 ID
                        resourceEnv: "cloud1-8g54d6xb74e96e7d",
                    });
                    c1.init();
                    //回调
                    callback(c1);
                };
                //完成初始化后再回调，即可访问云数据库
                let callback = function(c1) {
                    // 我个人不喜欢写云函数，所以直接写在Web这里做操作
                    // 你要访问的各种操作写在这个callback函数里即可，这里以查询users表为例
                    const db = c1.database();
                    db.collection("consultingGroup")
                        .orderBy("order", "asc")
                        .get({
                            success: (res) => {
                                // console.log(res.data);
                                that.consultingGroup = res.data;
                            },
                            fail: (res) => {
                                console.log(res);
                            },
                        });
                };
                first(callback);
            },

            checkLoadedResult(e) {
                //某图片加载完毕后执行
                let that = this;
                that.readyCount = that.readyCount + 1;
                if (that.readyCount == that.consultingGroup.length) {
                    that.loading = false;
                }
            },

            controlOpen() {
                let that = this;
                //初始化
                let first = function(callback) {
                    var c1 = new cloud.Cloud({
                        //必填，表示是未登录模式
                        identityless: true,
                        //资源方 AppID
                        resourceAppid: "wx96f760966921f98a",
                        //资源方环境 ID
                        resourceEnv: "cloud1-8g54d6xb74e96e7d",
                    });
                    c1.init();
                    //回调
                    callback(c1);
                };
                //完成初始化后再回调，即可访问云数据库
                let callback = function(c1) {
                    // 我个人不喜欢写云函数，所以直接写在Web这里做操作
                    // 你要访问的各种操作写在这个callback函数里即可，这里以查询users表为例
                    const db = c1.database();
                    db.collection("uploadFilecontroler").doc('7ac9c6966319679f00099be110c6e77c').get({
                        success: (res) => {
                            // console.log(res.data);
                            if (res.data.isOpen) {
                                var href = './static/documents/年级班级-姓名【广师大科教报名表】.docx' // 下载链接
                                var a = document.createElement('a');
                                // dom.setAttribute 方法给元素设置属性值
                                a.setAttribute('href', href);
                                a.setAttribute('target', '_blank');
                                a.setAttribute('id', 'startTelMedicine');
                                // 防止反复添加
                                if (document.getElementById('startTelMedicine')) {
                                    document.body.removeChild(document.getElementById(
                                        'startTelMedicine'));
                                }

                                // 将dom插入body中
                                document.body.appendChild(a);
                                // 触发点击dom a
                                a.click();

                            } else {
                                that.$message({
                                    message: '暂未开启报名通道',
                                    type: 'warning'
                                });
                            }

                        },
                        fail: (res) => {
                            console.log(res);
                        },
                    });
                };
                first(callback);

            },
        },
        mounted() {
            this.getConsultingGroup();
        },
    })
</script>